<template>
  <div class="head-bar">
    <div class="left">
      <div class="logo">
        <img src="@/assets/img/logo.png" />
      </div>
      <span>机票预订-管理员系统</span>
    </div>
    <div class="right">
      <img class="logo" src="@/assets/img/correct.png" />
      管理员：Zeiion
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'AdminHead',
  setup() {},
});
</script>

<style lang="scss" scoped>
@import '@/assets/css/config.scss';
$height: 70px;
.head-bar {
  height: $height;
  * {
    float: left;
  }
  div.left {
    background-color: lighten($themeColor, 5%);
    color: white;
    font-size: 19px;
    box-sizing: border-box;
    padding-left: 10px;
    height: $height;
    line-height: $height;
    width: 250px;
    // border-right: 1px solid white;
    .logo {
      img {
        margin-top: 16px;
        margin-right: 10px;
        width: 40px;
      }
    }
  }
  div.right {
    float: right;
    padding-right: 20px;
    height: $height;
    line-height: $height;
    img {
      width: 40px;
      margin-right: 10px;
      margin-top: 19px;
    }
  }
}
</style>
